<template>
      <div id="daili">
            <div class="slot">
                  <bread-crumb>代理商</bread-crumb>
            </div>
            <div class="shai">
                  <el-button type="primary" @click="handle">已处理</el-button>
                  <el-button type="danger" @click="nohandle">未处理</el-button>
            </div>
            <!-- table -->
            <div class="formData">
                  <el-table
                  :data="tableData"
                  stripe
                  style="width: 100%">
                        <el-table-column
                              prop="addtime"
                              label="日期"
                              >
                        </el-table-column>
                        <el-table-column
                              prop="username"
                              label="姓名"
                              >
                        </el-table-column>
                        <el-table-column
                              prop="address"
                              label="地址">
                        </el-table-column>
                        <el-table-column
                              prop="telephone"
                              label="电话">
                        </el-table-column>
                        <el-table-column
                              prop="dispose"
                              label="状态">

                              <template slot-scope="scope">
                                    <el-button @click="handleClick(scope.row)" :type="scope.row.dispose == 1 ? 'danger' : 'success'" size="mini">
                                          {{ scope.row.dispose == "1" ? "未处理" : "已处理"}}
                                    </el-button>
                              </template>
                        </el-table-column>
                        <el-table-column
                              prop="comment"
                              width="350px"
                              label="备注">
                              <template slot-scope="scope" >
                                   <el-button class="bz" size="mini"  v-if="scope.row.comment">{{ scope.row.comment }}</el-button>
                                   <el-button size="mini" @click="addComment(scope.row)" :type="scope.row.comment ? 'success' : 'primary'">{{ scope.row.comment ? "修改": "添加"}}</el-button>                                    <!-- <el-popover trigger="hover" placement="top">
                                    <div class="beizhu">{{ scope.row.comment ? scope.row.comment : "暂无备注,请添加" }}</div>
                                    <div slot="reference" class="name-wrapper">
                                          <el-button size="medium" :type="scope.row.comment?'primary':''" @click="addComment(scope.row)">{{ scope.row.comment ? '修改备注' : '添加备注' }}</el-button>
                                    </div>
                                    </el-popover> -->
                                
                              </template>
                        </el-table-column>
                        <el-table-column
                              prop="handletime"
                              label="处理时间">
                        </el-table-column>
                  </el-table>
            </div>

            <div class="page">
                  <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page.sync="currentPage"
                        :page-size="pageSize"
                        layout="prev, pager, next, jumper"
                        :total="total">
                  </el-pagination>
            </div>

            <add-beizhu :DialogData="DialogData" :formData="formData" @update="getTableData"></add-beizhu>
      </div>
</template>

<script>
      import BreadCrumb from "@/components/BreadCrumb"
      import AddBeizhu from "@/components/AddBeizhu"
      export default {
            components: {
                  BreadCrumb,
                  AddBeizhu,
            },
            data() {
                  return {
                        tableData: [],
                        allData: [],
                        currentPage: 1,
                        pageSize: 10,
                        total: 0,
                        DialogData: {
                              show: false,
                              title: ""
                        },
                        formData: {
                              id: "",
                              comment: ""
                        }
                  }
            },
            
            computed: {
                  token() {
                        return localStorage.miniToken
                  }
            },
            mounted () {
                  this.getTableData();
            },
            methods: {
                  async getTableData() {

                        let res = await this.$axios.post("/admin/index/index", { token: this.token })
                        //console.log(res);
                        this.allData = res.data.data
                        this.tableData = []
                        this.getPageData()
                        this.total = this.allData.length
                  },
                  // 获取每页数据
                  getPageData( table ) {
                        let len = this.allData.length
                        if (len) {
                              if (table) {
                                    this.tableData = table.slice( (this.currentPage - 1) * this.pageSize, this.currentPage  * this.pageSize)
                              } else {
                                    this.tableData = this.allData.slice( (this.currentPage - 1) * this.pageSize, this.currentPage  * this.pageSize)
                              }
                        }
                  },
                  // 页码变化
                  handleCurrentChange( page ) {
                        this.getPageData()
                  },
                  handleSizeChange() {

                  },
                  // 处理
                  async handleClick( row ) {
                        let res = await this.$axios.post("/admin/index/leavehandle",{token: this.token, id: row.id})
                       // console.log(res);
                        let code = res.data.code
                        if (code == 206) {
                              this.$message.success("处理成功")
                              this.getTableData()
                        } else {
                              this.$message.error("处理失败")
                              this.getTableData()
                        }
                  },
                  // 已处理
                  handle() {
                        // console.log(1);
                        
                        this.tableData = []
                        let self = this
                        this.allData.forEach( el => {
                              if (el.dispose == '2') {
                                    self.tableData.push(el)
                              }
                        })
                        this.total = this.tableData.length
                        this.getPageData( this.tableData)
                  },
                  // 未处理
                  nohandle() {
                        this.tableData = []
                        let self = this
                        this.allData.forEach( el => {
                              if (el.dispose == '1') {
                                    self.tableData.push(el)
                              }
                        })
                        this.total = this.tableData.length
                        this.getPageData(this.tableData)
                  },
                  // 添加备注
                  addComment( row ) {
                        this.DialogData = {
                              show: true,
                              title: `为 [${row.username}] 添加备注`
                        }
                        this.formData = {
                              id:row.id,
                              comment: ""
                        }
                  }
            },
      }
</script>

<style lang="scss" scoped>
#daili {
      .shai {
            margin: 20px 0;
            float: right;
            padding-right: 200px;
      }
      .page {
            float: right;
      }
      .bz {
            display: inline-block;
            max-width: 250px;
            overflow: hidden;
            color: #2b40cc;
      }
}

</style>